<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>序</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
			<p>11111111111111111</p>
		</canvas>
		<script type="text/javascript">
			
			var canvas = document.getElementById("canvas"),
				context = canvas.getContext("2d"),
				centerX = canvas.width/2,
				centerY = canvas.height/2,
				rad = Math.PI*2/100,
				speed = 0.1;
				
			//蓝圈
			function blueCircle(n){
				context.save()
				context.beginPath()
				context.strokeStyle = "#49f"
				context.lineWidth = 12
				context.arc(centerX,centerY,100,-Math.PI/2,-Math.PI/2 + n*rad,false)
				context.stroke()
				context.restore()
			}
			
			//白圈
			function whiteCircle(){
				context.save()
				context.beginPath()
				context.strokeStyle = "#a5def1";
				context.lineWidth = 12
				context.arc(centerX,centerY,100,0,Math.PI*2)
				context.stroke()
				context.restore()
			}
			
			//文字百分比
			function text(n){
				context.save()
				context.beginPath()
				context.fillStyle = "#f47c7c"
				context.font = "40px Arial"
				context.textAlign = "center"
				context.textBaseline = "middle"
				context.fillText(n.toFixed(0)+"%",centerX,centerY)
				context.restore()
			}
			
			(function drawFrame(){
				window.requestAnimationFrame(drawFrame,canvas)
				context.clearRect(0,0,canvas.width,canvas.height)
				
				whiteCircle()
				text(speed)
				blueCircle(speed)
				if(speed > 100) speed = 0
				speed += 0.1
			}())
		</script>
	</body>
</html>
